import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:syn_4s/core/extension/build_context_extension.dart';
import 'package:syn_4s/core/extension/int_extension.dart';
import 'package:syn_4s/core/router/router.dart';

import '../../../core/viewmodel/verification_pwd_view_model.dart';
import '../../shared/app_theme.dart';
import '../../widgets/custom_ui.dart';
import '../../widgets/gradient_button.dart';
import '../../widgets/shadow_container.dart';

class VerificationPwdContent extends StatelessWidget {
  VerificationPwdContent({super.key});

  final VerificationPwdViewModel viewModel =
      Get.find<VerificationPwdViewModel>();

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      decoration: const BoxDecoration(
        gradient: LinearGradient(
            colors: [AppTheme.bgStartColor, AppTheme.bgEndColor]),
      ),
      child: SingleChildScrollView(
        child: Column(
          children: [
            ShadowContainer(
              border: Border.all(color: AppTheme.orangeColor),
              margin: EdgeInsets.symmetric(horizontal: 12.px, vertical: 8.px),
              padding: EdgeInsets.only(
                  left: 8.px, right: 8.px, top: 24.px, bottom: 56.px),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    context.l10n.verification_title,
                    style: const TextStyle(color: AppTheme.sixColor),
                  ),
                  Obx(() => Text(
                        viewModel.email.value,
                        style: const TextStyle(color: Colors.black),
                      )),
                  SizedBox(
                    height: 16.px,
                  ),
                  buildContent(context.l10n.verification_hint),
                  SizedBox(
                    height: 72.px,
                  ),
                  buildButton(context),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        context.l10n.verification_tip,
                        style: const TextStyle(color: AppTheme.sixColor),
                      ),
                      Text(
                        context.l10n.resend_code,
                        style: const TextStyle(color: AppTheme.orangeColor),
                      ),
                    ],
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildContent(String title) {
    return TextField(
      controller: viewModel.controller,
      textAlign: TextAlign.center,
      style: TextStyle(fontSize: 20.px),
      decoration: InputDecoration(
        contentPadding: EdgeInsets.symmetric(horizontal: 10.px),
        filled: true,
        fillColor: Colors.white,
        hintText: title,
        enabledBorder: getWhiteOvalBorder(),
        focusedBorder: getFocusedBorder(),
      ),
    );
  }

  Widget buildButton(BuildContext context) {
    return GradientButton(
        margin: EdgeInsets.only(bottom: 8.px),
        onPressed: () {
          print(viewModel.controller.text);
          Get.toNamed(MyRouter.changePwdRoute);
        },
        child: Text(
          context.l10n.btn_continue,
          style: TextStyle(color: Colors.white, fontSize: 20.px),
        ));
  }
}
